<template>
  <view class="page">
    <view class="section">
      <button @click="chooseAndPreviewImage">选择并预览本地图片</button>
      <image v-if="localImage" :src="localImage" mode="widthFix" class="preview"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      localImage: ""
    };
  },
  methods: {
    chooseAndPreviewImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ["album", "camera"],
        success: (res) => {
          this.localImage = res.tempFilePaths[0];
          uni.previewImage({ urls: [this.localImage] });
        },
        fail: (err) => {
          console.error("选择图片失败：", err);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style>
.page {
  padding: 30rpx;
}
.section {
  margin-bottom: 40rpx;
}
.preview {
  width: 100%;
  margin-top: 20rpx;
  border-radius: 10rpx;
}
</style>